<template>
  <view class="home">
    <view class="form-box">
      <view class="form-item">
        <view class="form-label">商品名称</view>
        <input maxlength="11" v-model="form.name" placeholder="输入商品名称" class="form-input" />
      </view>
      <view class="form-item" @click="handleClick('category')">
        <view class="form-label">分类</view>
        <view class="form-input">
          {{form.category_text?form.category_text:'选择分类'}}
        </view>
      </view>
      <!--      <view class="form-item" @click="handleClick('wanlAddress')">
        <view class="form-label">地址</view>
        <view class="form-input">
          {{form.formatted_address? form.formatted_address:'选择地区'}}
        </view>
      </view> -->
      <view class="form-item">
        <view class="form-label">价格</view>
        <input maxlength="11" v-model="form.salesprice" placeholder="输入价格" class="form-input" />
      </view>
      <view class="form-item">
        <view class="form-label">文字描述</view>
        <textarea placeholder="请输入文字描述" v-model="form.content" class="form-textarea" />
      </view>
      <view class="form-item">
        <view class="form-label">需求图</view>
        <view class="form-image">
          <image src="/static/images/user/icon_upload.png" @click="uploadCover" mode=""></image>
          <view class="item" v-for="(item,index) in form.images" :key="index">
            <text class="wlIcon-31guanbi" @click="form.images.splice(index,1)"></text>
            <image :src="item" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <view class="shop-btn" @click="handleAdd">
      确认发布
    </view>
    <!-- <wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address> -->
    <uni-data-picker ref="category" :localdata="category" :map="{text:'name',value:'id'}" @change="confirmChange"
      popup-title="请选择"></uni-data-picker>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        form: {
          name: '',
          content: '',
          images: [],
          category_id: '',
          category_text: '',
          product_type: 2,
          // city_id: '',
          // areas_id: ''
        },
        id: '',
      }
    },
    computed: {
      ...mapState(['common', 'statistics', 'cart']),
      category() {
        return this.transformToTwoLevels(this.common.modulesData.categoryModules)
      },
    },
    onLoad(options) {
      this.id = options.id
      console.log(this.id)
      if (this.id) {
        this.goodsDetail()
      }
    },
    methods: {
      goodsDetail() {
        uni.request({
          url: '/xilumarket.product/detail',
          method: 'GET',
          data: { product_id: this.id },
          success: ({ data }) => {
            console.log(data)
            this.form = data
            this.form.images = this.form.images_text
            this.form.category_text = this.form.category.name
          }
        })
      },
      // 选择地址成功
      successSelectAddress(address) {
        this.form.country = address.country;
        this.form.province_id = address.province;
        this.form.city = address.city;
        this.form.city_id = address.citycode;
        this.form.district = address.district;
        this.form.formatted_address = address.formatted_address;
        this.form.location = address.location;
        this.form.adcode = address.adcode;
        this.form.location = address.location;
        this.form.adcode = address.adcode;
      },
      // 确定选择分类
      confirmChange(e) {
        this.form.category_id = e.detail.value[1].value
        this.form.category_text = e.detail.value[1].text
        console.log(this.form)
        this.$forceUpdate()
      },
      // 递归处理函数，只获取到第二级分类
      transformToTwoLevels(data) {
        return data.map(item => {
          // 只保留两级，并将 childlist 改为 children
          const transformedItem = {
            ...item,
            children: item.childlist.map(child => ({
              ...child,
              children: [] // 移除三级
            }))
          };
          delete transformedItem.childlist; // 删除原来的 childlist
          return transformedItem;
        });
      },
      // 选择地区
      handleClick(key) {
        this.$refs[key].show()
      },
      // 上传图片
      uploadCover() { //选择图片
        uni.chooseImage({
          sourceType: ["camera", "album"],
          sizeType: "compressed",
          count: 1,
          success: res => {
            uni.request({
              url: '/wanlshop/common/uploadData',
              success: updata => {
                uni.uploadFile({
                  url: updata.data.uploadurl,
                  filePath: res.tempFilePaths[0],
                  formData: updata.data.storage == 'local' ? null : updata.data.multipart, // 1.0.5升级
                  header: {
                    token: this.$store.state.user.token
                  },
                  name: 'file',
                  success: ({ data }) => {
                    let res = JSON.parse(data)
                    if (res.code == 1) {
                      this.form.images.push(res.data.fullurl)
                    }
                  }
                });
              }
            });
          }
        });
      },
      // 发布商品
      handleAdd() {
        uni.request({
          url: '/xilumarket.recovery/add',
          data: {
            ...this.form,
            images: this.form.images.join(',')
          },
          success: ({ res }) => {
            console.log(res)
            if (res.code == 1) {
              uni.showToast({
                icon: 'none',
                mask: true,
                title: '修改成功'
              })
              setTimeout(() => {
                this.$wanlshop.back()
              }, 800)
            }

          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .form-box {
    border-radius: 12rpx;
    background: #fff;
    margin: 24rpx;

    .form-item {
      padding: 30rpx;
      border-bottom: 1px solid #f5f5f5;

      .form-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        display: inline-block;
        width: 200rpx;
      }

      .form-image {
        image {
          width: 160rpx;
          height: 160rpx;
          margin-top: 12rpx;
          margin-right: 12rpx;
        }

        .item {
          display: inline-block;
          position: relative;

          text {
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            z-index: 3;
            width: 40rpx;
            height: 40rpx;
            border-radius: 5500rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            background-color: #e6162c;
            color: #fff;
          }
        }
      }

      .form-card {
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 280rpx;
          height: 224rpx;
          margin-top: 30rpx;
        }
      }

      .form-input {
        display: inline-block;
        width: calc(100% - 200rpx);
        vertical-align: bottom;
        font-size: 28rpx;
        text-align: right;

        .icon_more {
          float: right;
          width: 40rpx;
          height: 40rpx;
        }

      }



      .form-textarea {
        border: 0;
        font-size: 28rpx;
        width: 100%;
        height: 234rpx;
        padding: 20rpx 40rpx;
        margin-top: 12rpx;
        background: #f5f5f5;
      }
    }
  }

  .shop-btn {
    width: 660rpx;
    height: 92rpx;
    background: linear-gradient(270deg, #EF430F 0%, #F17E19 100%);
    border-radius: 12rpx;
    margin: 80rpx auto 0;
    line-height: 92rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
  }

  /deep/.input-value-border {
    display: none;
  }
</style>